<template>
    <div class="header_box">
        <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link">
                尊敬的管理员 {{ username }} 欢迎您<i
                    class="el-icon-arrow-down el-icon--right"
                ></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
export default {
    name: "Header",

    data() {
        return {
            username: sessionStorage.getItem("username") || "",
        };
    },

    mounted() {
        // if (this.username.length == 0) {
        //     let res = JSON.parse(sessionStorage.getItem("username"));
        //     this.username = res.username;
        // }
    },

    methods: {
        handleCommand(command) {
            if (command == "logout") {
                sessionStorage.removeItem("username");
                sessionStorage.removeItem("token");
                this.$router.push("/");
            }
        },
    },
};
</script>

<style scoped>
.el-dropdown-link {
    cursor: pointer;
    color: #409eff;
}
.el-icon-arrow-down {
    font-size: 12px;
}
.header_box {
    text-align: right;
}
</style>
